<!--  -->
<template>
  <div class="list-page">
    <c-title :hide="false" text='我的藏品'></c-title>
    <div class="my-list" v-if="myList.length > 0">
      <block v-for="(item,index) in myList" :key="index">
        <goods-item :item="item" :goodIndex="index" className="covert">
          <template v-slot:convertBtn>
            <div class="flex-a-c flex-j-sb covert">
              <h4>×{{item.total}}</h4>
              <div class="covert-gourp flex">
                <div class="sponsor-btn" @click.stop="sponsorClick(item.goods_id,item.can_use_total)">发起转赠</div>
                <div class="covert-btn" @click.stop="covertClick(item.goods_id,item.can_use_total)">兑换藏品</div>
              </div>
            </div>
          </template>
        </goods-item>
      </block>
    </div>
    <van-empty description="暂无数据" v-else/>
    <div class="mb60"></div>
    <spon-popup :sponShow.sync="sponShow" ref="sponPopup"  :params.sync="params" @sponsorConfrim="sponsorConfrim" :maxtotal="maxtotal"></spon-popup>
    <exchange-popup 
      :changeShow.sync="changeShow" 
      ref="exchangePop" 
      :exParams.sync="exParams"
      :addressName="addressName"
      :maxtotal="maxtotal" 
      @addressCallback="addressCallback" 
      @streetConfirm="streetConfirm"
      @exchangeClick="exchangeClick">
    </exchange-popup>
  </div>
</template>

<script>
import collectionList_controller from "./collectionList_controller";
export default collectionList_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .my-list {
    margin:10px 12px 0 12px;
    .covert {
      h4 {
        font-size: 13px;
        font-weight: 400;
        color: #3B3B4A;
        line-height: 20px;
      }
      .covert-gourp {
        font-size: 13px;
        line-height: 13px;
        .sponsor-btn {
          color:var(--themeBaseColor);
          padding:10px 12px;
          border-radius: 25px 25px 25px 25px;
          border: 1px solid var(--themeBaseColor);
        }
        .covert-btn {
          padding:10px 12px;
          color:#fff;
          background: var(--themeBaseColor);
          border-radius: 25px 25px 25px 25px;
          margin: 0 0 0 10px;
        }
      }
    }
  }
  .mb60 {
    height: 60px;
    clear: both;
  }
</style>